<style scoped>
.el-main {
    margin: 0 auto;
    width: 1400px;
}
</style>
<template xmlns:el-col="http://www.w3.org/1999/html">
    <div class="common-layout">
        <el-container>
            <el-main>
                <h5>我的浏览痕迹</h5>
                <el-row v-model="products">
                    <el-col :span="6" v-for="item in products" :key="item.id">
                        <el-card class="product-card" :id="item.id"
                                 style="width: 130px">
                            <div class="info">
                                <el-image class="product-picture"
                                          :src="`http://127.0.0.1:8081/product/${item.product.picture }`" @click="handClick(item.product.id)"></el-image>
                                <div>
                                    <el-text type="info" truncated style="display:none;">
                                        {{ item.product.id }}
                                    </el-text>
                                </div>
                                <div>
                                    <el-text type="info" truncated>{{ item.product.title }}</el-text>
                                </div>
                                <div>
                                    <el-space>
                                        <el-text type="danger">￥{{ item.product.new_price }}</el-text>
                                    </el-space>
                                </div>
                            </div>
                            <div style="margin-top: 5px;margin-left: 8px">
                                <el-button @click="removeHistory(item.id)">移除</el-button>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

import {onMounted, ref, reactive, toRaw} from 'vue'
import {ElMessageBox, ElTable} from 'element-plus'
import goodApi from '../../api/goods.js'
import axios from 'axios'
import router from '../../router'
import {ElMessage} from "element-plus";

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const mouth = ref()
const year = ref()
const day = ref()
const weeks = ref()
const days = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
]
const week = ref('')
onMounted(() => {
    getCurrenTime()
    UserMessage()
    history()
})


function getCurrenTime() {
    const now = new Date();
    year.value = now.getFullYear();
    mouth.value = now.getMonth() + 1;
    day.value = now.getDate();
    weeks.value = now.getDay();
    week.value = days[weeks.value]
}

const User = reactive({
    username: '',
})
const avatar = ref('')

const UserMessage = () => {
    axios.get('http://127.0.0.1:8080/user/queryById').then(res => {
        User.username = res.data.username
        avatar.value = res.data.avatar
    }).catch(error => {
        console.log(error)
    })
}
const products = ref([])
const history = () => {
    axios.get('http://127.0.0.1:8080/history/queryByUid').then(res => {
        products.value = res.data
        console.log(res.data)
    }).catch(error => {
        console.log(error)
    })
}

const removeHistory=(id)=>{
    axios.delete('http://127.0.0.1:8080/history/removeById/'+id).then(res => {
        history();

    }).catch(error => {
        console.log(error)
    })
}
const handClick = (id) => {
    console.log(id)
    router.push({
        path: '/detail',
        query: {
            pid: id
        }
    })
}
</script>
